<template>
    <div class="searchContainer">
        <div class="header">
            <mt-header title="搜索">
                <router-link to="/home" slot="left">
                    <mt-button icon="back">返回</mt-button>
                </router-link>
            </mt-header>
        </div>
        <div class="searchHeader">
            <el-input placeholder="请输入要查询的商家或美食名称" v-model="searchValue" clearable @click.native="inputButton"></el-input>
            <button @click.prevent="searchButton">搜索</button>
        </div>
        <div class="searchTip" v-show="OnOff">
            <div class="searchBox">
                <p>搜索历史</p>
                <img src="../images/垃圾桶.svg" width="25px" height="25px" @click.prevent="deleteSearch">
            </div>
            <el-tag class="tip"
                v-for="(obj,index) in tipList"
                :key="index">
                <p @click.prevent="copySearch(obj)">{{obj}}</p>
            </el-tag>
        </div>  
        <div v-if="!OnOff">
            <ul class="infinite-list searchBody scroll" v-infinite-scroll="load" style="overflow:auto" infinite-scroll-disabled="close">
                <li v-for="(obj,index) in bodyList" :key="index" class="infinite-list-item">
                    <div class="box">
                        <div class="itema">
                            <img :src="obj.shopUrl">
                        </div>
                        <div class="itemb">{{obj.shopName}}</div>
                        <div class="itemc">
                            <p>月售{{obj.number}} 起送￥{{obj.startCost/100}}</p>
                            <p v-if="obj.distributionCost==0" class="pColor">免费配送</p>
                            <p v-if="obj.distributionCost!=0">配送￥{{obj.distributionCost/100}}</p>
                        </div>
                        <div class="itemd">{{obj.time}}分钟-{{obj.dist}}km</div>
                        <div class="iteme">
                            <!-- 星星分数显示 -->
                            <el-rate v-model="obj.score"
                                disabled 
                                show-score 
                                text-color="#ff9900" 
                                score-template="{value}">
                            </el-rate>
                        </div>
                        <div class="itemf">
                            <div v-for="(item,index) in obj.reduction" :key="index" class="reductionfContainer">
                                <p>{{item[0]}}减{{item[1]}}</p>
                            </div>
                        </div>
                        <div class="itemg">
                            <div v-for="item in food" :key="item" class="foodContainer">
                                <div class="foodBox">
                                    <img src="../images/food.jpg">
                                    <!-- <p>{{item.foodLabel}}</p> -->
                                    <!-- <p class="pColor">￥{{item.cost}}</p> -->
                                    <p>小酥肉</p>
                                    <p>￥5.5</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <footer-bar class="footerClass"></footer-bar>
    </div>
</template>
<script>
import footerBar from './footer.vue'
    export default{
        data(){
            return{
                searchValue:null,
                tipList:[],
                OnOff:false,
                currentPage:0,
                size:5,
                totalMax:20,
                close:true,
                bodyList:[],
                food:[1,2,3,4],
            }
        },
        components:{ 
            footerBar
        },
        methods:{
            async inputButton(){
                if(window.sessionStorage.getItem('tokenStr')){
                    let tokenStr=window.sessionStorage.getItem('tokenStr');
                    await this.getRequest('/search/shop',null,tokenStr).then(response=>{
                        if(response.code==200){
                            this.tipList=response.obj;
                        }
                    });
                    this.OnOff=true;
                }
            },
            async searchButton(){
                this.close=false;
                this.OnOff=false;
                if(this.searchValue!=""&&this.searchValue!=null){
                    let tokenStr=window.sessionStorage.getItem('tokenStr');
                    let postData={
                        req:this.searchValue
                    };
                    await this.getRequest('/search/addsearchshop',postData,tokenStr).then(response=>{
                        if(response.code==200){
                            this.tipList.push(this.searchValue);
                        }
                    });
                }
            },
            load(){
                //发送请求给后端，往bodyList里push新对象
                this.currentPage++;
                let sendCurr=this.currentPage;
                let sendSize;
                if(this.bodyList.length+this.size<=this.totalMax){
                    sendSize=this.size;
                }else{
                    console.log(this.totalMax,this.bodyList.length);
                    sendSize=this.totalMax-this.bodyList.length;
                    this.close=true;
                }
                this.searchButton();
                if(sendSize==0)
                    this.close=true;
                else if(sendSize!=0){
                    let tokenStr=window.sessionStorage.getItem("tokenStr");
                    let postData={
                        currentPage:sendCurr,
                        size:sendSize
                    };
                    this.getRequest("/shop/selectAll",postData,tokenStr).then(response=>{
                        if(response.code==200){
                            let n=response.obj.data.length;
                            let last=this.bodyList.length;
                            console.log("last---"+last);
                            console.log("n---"+n);
                            for(let i=0;i<n;i++){
                                this.bodyList.push(response.obj.data[i]);
                                let temp=this.bodyList[last+i].reduction.split(" ");
                                let arr=[];
                                for(let j=0;j<temp.length;j=j+2){
                                    let obj=[temp[j],temp[j+1]];
                                    arr.push(obj);
                                }
                                this.bodyList[last+i].reduction=arr;
                                this.bodyList[last+i].score=this.bodyList[last+i].score/10;
                                this.bodyList[last+i].shopUrl='/file'+this.bodyList[last+i].shopUrl;
                            }
                            console.log(this.bodyList.length);
                        }
                    });
                }
            },
            async deleteSearch(){
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                await this.getRequest('/search/delsearchshop',null,tokenStr).then(response=>{
                    if(response.code==200){
                        this.tipList=response.obj;
                    }
                });
            },
            async copySearch(data){
                this.searchValue=data;
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import 'mint-ui/lib/style.css';
    @import '../style/mixin.scss';
    *{
        margin: 0;
        padding: 0;
    }
    .searchContainer{
        position: relative;
        .searchHeader{
            @include width-height(100%,3rem);
            @include white;
            padding-top: 0.5rem;
            display: grid;
            grid-template-columns: 75% 25%;
            grid-template-rows: 100%;
            /deep/ .el-input{
                width:96%;
                padding-left:0.5rem;
            }
            /deep/ .el-input__inner{
                @include width-height(100%,2.4rem);
                border: 1px solid #e1e1e1;
                border-radius: 0.2rem;
                @include font-size-color(1.1rem,#000);
                padding-left:0.5rem;
            }
            button{
                @include width-height(100%,2.4rem);
                @include blue;
                @include font-size-color(1.1rem,#fff);
                border-radius: 0.2rem;
                border: 1px solid #26a2ff;
            }
        }
        .searchTip{
            @include font-size-color(1.25rem,#666);
            @include width-height(100%,10rem);
            .searchBox{
                @include width-height(100%,3rem);
                display: grid;
                grid-template-columns: 90% 10%;
                grid-template-rows: 100%;
                p{
                    padding-left:0.8rem;
                    line-height: 3rem;
                }
                img{
                    margin-top: 0.8rem;
                }
            }
            .tip{
                font-size:1rem;
                padding:0 1rem 0 1rem;
                border-radius: 1rem;
                text-align: center;
                margin: 0.8rem 0 0 1rem;
            }
        }
        .searchBody{
            @include white;
            .scroll{
                @include width-height(100%,86vh);//指定高度
                overflow: auto;//内容超过指定高度，出现滚动条
            }
            .box{
                display: grid;
                background-color: #fff;
                @include width-height(100%,13rem);
                border-radius: 1rem;
                margin-top: 0.4rem;
                grid-template-columns: 15% 28.33% 28.33% 28.33%;
                grid-template-rows: 11.11% 11.11% 11.11% 11.11% 55.55%;
                grid-template-areas: "a b b b"
                                     "a c c d"
                                     "a e e e"
                                     ". f f f"
                                     ". g g g";
                .itema{
                    grid-area:a;
                    img{
                        @include width-height(65px,65px);
                        border-radius: 0.8rem;
                    }
                }
                .itemb{
                    @include font-size-color(1.2rem,#000);
                    font-weight: bold;
                    grid-area:b;
                }
                .itemc{
                    @include font-size-color(1rem,#666);
                    grid-area:c;
                    p{
                        display: inline;
                        @include width-height(50%,100%);
                    }
                    .pColor{
                        color:orange;
                    }
                }
                .itemd{
                    grid-area:d;
                    @include font-size-color(1rem,#666);
                    text-align: right;
                    padding-right: 0.5rem;
                }
                .iteme{
                    grid-area:e;
                    /deep/ .el-rate__item{
                        margin:-4px;
                    }
                }
                .itemf{
                    grid-area:f;
                    .reductionfContainer{
                        display: inline;
                        p{
                            display: inline;
                            margin-right: 0.3rem;
                            background-color: #fff;
                            @include font-size-color(1rem,rgb(252, 101, 0));
                            @include width-height(15%,80%);
                            border: 1px solid rgb(252, 101, 0);
                            border-radius: 0.3rem;
                            line-height: 100%;
                            padding:0 0.3rem 0 0.3rem;
                            text-align: center;
                        }
                    }
                }
                .itemg{
                    grid-area:g;
                    .foodContainer{
                        display: inline-block;
                        margin-right: 2%;
                        .foodBox{
                            margin-top:0.3rem;
                            @include width-height(25%,100%);
                            display: inline-block;
                            img{
                                @include width-height(90px,70px);
                                border-radius: 0.4rem;
                            }
                            p{
                                @include font-size-color(1rem,#000);
                                @include width-height(68px,1.2rem);
                                line-height: 100%;
                                text-align: center;
                            }
                            .pColor{
                                color:rgb(252, 101, 0);
                            }
                        }
                    }
                }
            }
        }
        .footerClass{
            @include width-height(100%,3rem);
            position: fixed;
            bottom: 0;
        }
    }
</style>